<template>
  <el-menu :collapse="isCollapse" id="leftBar">
    <el-menu-item index="1" @click="router.push({ path: '/' })">
      <el-icon :size="20">
        <histogram />
      </el-icon>
      <span>数据</span>
    </el-menu-item>
    <el-menu-item index="2" @click="router.push({ path: '/orderList' })">
      <el-icon :size="20">
        <memo />
      </el-icon>
      <span>订单管理</span>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>
        <el-icon>
          <goods />
        </el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item index="3-1" @click="router.push({ path: '/goodsList' })">
        <el-icon :size="20">
          <List />
        </el-icon>
        <span>商品列表</span>
      </el-menu-item>
      <el-menu-item index="3-2" @click="router.push({ path: '/goodsType' })">
        <el-icon :size="20">
          <MessageBox />
        </el-icon>
        <span>商品类型</span>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="4" @click="router.push({ path: '/shop' })">
      <el-icon :size="20">
        <shop />
      </el-icon>
      <span>商铺管理</span>
    </el-menu-item>
    <el-menu-item index="5" @click="router.push({ path: '/user' })">
      <el-icon :size="20">
        <User />
      </el-icon>
      <span>用户管理</span>
    </el-menu-item>
    <el-menu-item index="6" @click="router.push({ path: '/admin' })">
      <el-icon :size="20">
        <Avatar />
      </el-icon>
      <span>管理员管理</span>
    </el-menu-item>
    <el-menu-item index="6" @click="router.push({ path: '/pickupPage' })">
      <el-icon :size="20">
        <Monitor />
      </el-icon>
      <span>取餐码</span>
    </el-menu-item>
    <el-menu-item index="6" @click="collapseChange">
      <el-icon :size="20">
        <arrowLeftBold v-if="!isCollapse"></arrowLeftBold>
        <arrowRightBold v-else></arrowRightBold>
      </el-icon>
      <span>{{ isCollapse ? '展开' : '收起' }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRouter } from "vue-router"
const router = useRouter()
import { ref } from 'vue'
let isCollapse = ref(false)
let collapseChange = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style lang="scss" scoped>
#leftBar {
  height: 100%;
}

span {
  font-size: 2rem;
}
</style>